<!--
 * @Author: yanzengyong 709402944@qq.com
 * @Date: 2025-08-25 09:54:19
 * @LastEditors: yanzengyong 709402944@qq.com
 * @LastEditTime: 2025-08-26 00:12:43
 * @FilePath: /cyj-framwk-web/src/components/Form/src/cyj/components/DepartmentSelectNative.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <okDepartmentSelect
    :value="value"
    :multiple="multiple"
    ref="vokSelect"
    :getContainerModal="getContainer"
    :remoteMethod="onRemoteMethod"
    :getInfoById="onGetInfoById"
    :getRootDept="onGetRootDept"
    :getSubDept="onGetSubDept"
    :update="handleSelectChange"
    :hideSelect="true"
    :customOpenModal="false"
    v-bind="$attrs"
    :theme="appTheme"
  />
</template>
<script lang="ts" setup>
  import { ref, watch, watchEffect } from 'vue';
  import { okDepartmentSelect } from '@byteluck/ok-wc-ui';
  import { queryDepartTreeSync } from '/@/api/common/api';
  import { cloneDeep } from 'lodash-es';
  import { inject } from 'vue';

  const emit = defineEmits(['change']);
  const props = defineProps({
    value: String,
    placeholder: String,
    disabled: Boolean,
    multiple: {
      type: Boolean,
      default: false,
    },
  });
  const getContainer = () => document.body;
  /**百特搭弹窗方法 */

  const vokSelect = ref();
  const openModalClick = () => {
    vokSelect.value.openTreeStructure();
  };

  const appTheme = inject('appTheme');

  const onLoadData = async (params?: any) => {
    const queryParams = { primaryKey: 'key', ...params };
    const list = await queryDepartTreeSync(queryParams);
    return list;
  };

  const onGetInfoById = async () => {
    const ids = props.value;
    const list = await onLoadData({ ids });
    const result = convertDepartmentListForResult(list);
    return result;
  };

  const onRemoteMethod = async (
    query: string,
    displayLevel: string,
    appointDepTypeList: string[],
    page: { page_index: number; page_size: number },
    organizationView: string
  ) => {
    const list = await onLoadData({ departName: `*${query}*` });
    const result = convertDepartmentListForResult(list);
    return result;
  };

  const onGetRootDept = async () => {
    const list = await onLoadData();
    const newList = list.map((item: any) => {
      return {
        org_id: item.id,
        org_name: item.departName,
        org_type: 'INTERNAL',
        org_tag_code: null,
        org_tag_name: null,
        dept_name_path: item.departName,
        has_child: item.isLeaf,
      };
    });
    return {
      data: newList,
    };
  };

  const convertDepartmentListForResult = async (list: any[]) => {
    const newList = list.map((item: any) => {
      return {
        department_name: item.departName,
        department_id: item.id,
        parent_id: item.parentId,
        dept_level_no: null,
        dept_id_path: item.id,
        dept_name_path: item.departName,
        display_value: item.departName,
        order: null,
        has_child: false,
        org_type: null,
        label_name: null,
        org_id: item.parentId,
        has_child: !item.isLeaf,
      };
    });
    return {
      code: '000000',
      data: newList,
    };
  };

  const onGetSubDept = async (parentDepartmentId: string, displayLevel: number, page: { page_index: number; page_size: number }) => {
    const list = await onLoadData({ pid: parentDepartmentId });
    const result = convertDepartmentListForResult(list);
    return result;
  };

  const send = async (values) => {
    let result = typeof props.value == 'string' ? values.join(',') : values;
    emit('update:value', result);
    emit('change', result);
    // if (!values || values.length == 0) {
    //   emit('select', null, null);
    // }
  };

  const handleSelectChange = (values, options) => {
    // const value = cloneDeep(values);
    // send(value);
    emit('change', values, options);
  };
  /**百特搭弹窗方法 */

  defineExpose({
    openModalClick,
  });
</script>
